<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" href="css/reset.css" />
	<link rel="stylesheet" href="css/main.css" />
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
	<script type="text/javascript" src="js/scroll.js"></script>
	<title>聊天机器人</title>
</head>

<body>
	<div class="wrap">
		<!-- 头部 Header 区域 -->
		<div class="header">
			<h3>小思同学</h3>
			<img src="img/person01.png" alt="icon" />
		</div>
		<!-- 中间 聊天内容区域 -->
		<div class="main">
			<ul class="talk_list" style="top: 0px;">
				<li class="left_word">
					<img src="img/person01.png" />
					<span>你好</span>
				</li>
				<!-- <li class="right_word">
					<img src="img/person02.png" />
					<span>你好哦</span>
				</li> -->
			</ul>
			<div class="drag_bar" style="display: none;">
				<div class="drager ui-draggable ui-draggable-handle" style="display: none; height: 412.628px;"></div>
			</div>
		</div>
		<!-- 底部 消息编辑区域 -->
		<div class="footer">
			<img src="img/person02.png" alt="icon" />
			<!-- autofocus 自动获取插入条光标 -->
			<input autofocus type="text" placeholder="说的什么吧..." class="input_txt" />
			<input type="button" value="发 送" class="input_sub" />
		</div>
		<!-- 设置语音标签 -->
		<audio autoplay></audio>
	</div>
	<!-- 导入axios.js -->
	<script src="./js/axios.js"></script>
	<script>
		// 相当于 js 中的 window.addEventListender('load', function(){})
		$(function () {
			// 初始化右侧滚动条
			// 这个方法定义在scroll.js中
			resetui()

			// 思路1: 点击按钮，把自己说的内容渲染到页面上（DOM操作）;
			// 思路2: 发送ajax，通过我们的回复获取小思同学的回复（Ajax）;
			// 思路3: 发送ajax，通过发送小思同学的回复转换成语音（Ajax）;

			// 思路1: 点击按钮，把自己说的内容渲染到页面上（DOM操作）;
			// 获取相关元素
			const input_txt = document.querySelector('.input_txt');
			const input_sub = document.querySelector('.input_sub');
			const talk_list = document.querySelector('.talk_list');
			// 回车触发点击事件发送
			input_txt.addEventListener('keyup', function (e) {
				// 判断按下的是否是 回车
				if (e.key == 'Enter') {
					// 是回车的话触发点击事件
					input_sub.click()
				}
			})
			// 绑定事件
			input_sub.addEventListener('click', function () {
				// 去除左右两侧的空格
				let txt = input_txt.value.trim()
				if (txt == "") {
					// input清空空格
					input_txt.value = ''
					// 获取插入光标
					input_txt.focus()
					return alert('内容不能为空!')
				}
				// 创建一个li标签,设置类名
				let newLi = document.createElement('li')
				newLi.className = 'right_word'
				// 设置内容
				newLi.innerHTML = `
				 <img src="img/person02.png" />
				 <span>${txt}</span>
				`
				// 添加到ul中
				talk_list.appendChild(newLi)
				// 添加成功后,重置滚动条
				resetui()
				// 添加完毕,input清空
				input_txt.value = ''
				// 获取插入条光标
				input_txt.focus()
				// 调用函数
				getMsg(txt)
			})

			// 思路2:发送asjx,痛我们的回复获取小思同学的回复(AJax)
			function getMsg(msg) {
				axios({
					url: 'http://www.liulongbin.top:3009/api/robot',
					params: {
						spoken: msg,
					}
				}).then(({ data: res }) => {
					if (res.message != 'success') {
						return alert(res.message)
					}
					// 创建li标签,然后设置类名和内容
					let newLi = document.createElement('li')
					newLi.className = 'left_word'
					// 获取回复消息
					let txt = res.data.info.text
					newLi.innerHTML = `
					<img src="img/person01.png" />
				    <span>${txt}</span>
					`
					// 添加到ul中
					talk_list.appendChild(newLi)
					// 重置滚动条
					resetui()
					// 调用语音函数
					getVoice(txt)
				})
			}

			// 思路3:发送ajax,通过发送小思同学的回复转换成语音(Ajax)
			function getVoice(msg){
				// 发送ajax
				axios({
					method:"get",
					url:'http://www.liulongbin.top:3009/api/synthesize',
					// 查询参数是params,请求体参数 data
					params:{
						text:msg
					}
				}).then(({data:res}) =>{
					// 判断业务状态码
					if(res.code != 200){
						return alert(res.message)
					}
					// 成功就设置路径
					document.querySelector('audio').src = res.voiceUrl
				})
			}

		})
	</script>
</body>

</html>